<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vue-toasted.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vant.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/listener_other.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<van-nav-bar  @click-left="onClickLeft" title="待付款" left-text="返回" left-arrow id="a">
			</van-nav-bar>
			<head style="height: 200px;">
				<img src="../../img/touxiang.jpg" style="height: 60px;width: 60px; margin:30px 150px;width: 100px;
				height: 100px;
				border-radius: 50%;"/>
			</head>
			<section>
				<van-cell-group>
				  <van-field
					v-model="username"
					required
					clearable
					id="phone"
					label="手机号"
					name="account"
					right-icon="question-o"
					placeholder="请输入手机号"
				  ></van-field>

				  <van-field
					v-model="password"
					type="password"
					name="password"
					id="password"
					label="密码"
					placeholder="请输入密码"
					required
				  ></van-field>
				</van-cell-group>
				<van-cell value="忘记密码？" style="margin: 15px  210px;"></van-cell>
				<van-button type="danger" size="large" @click="login">立即登录</van-button>
				<div style="margin: 15px 100px;">还没注册？<a href="zhuce.html">立即注册</a></div>
			</section>
			<footer>
				
			</footer>
		</div>
		<script>
			Vue.use(Toasted);
			var vm=new Vue({
				el:"#app",
				data:{
					username:"",
					password:""
				},
				methods:{
					onClickLeft: function() {
						plus.webview.close(plus.webview.currentWebview(), "slide-out-left");
						console.log("返回个人页面")
					},
					login:function() {
						var pho=document.getElementById("phone").value;
						var pwd=document.getElementById("password").value;
						ajax({
							url: "http://dsapi.ysd3g.com/api/login", //请求地址
							dataType: "jsonp",  //响应的格式，jsonp可以有效的解决跨域问题
							data: {  //需要携带的参数
								account:pho, password:pwd
								//account:this.username,password:this.password
							},
							success: function(result) {
								console.log(result);
								if(result.Error){
									vm.$toasted.error("登录失败",{position:"bottom-center",duration:3000});
								}
								else{
									window.setTimeout(function() {
										plus.webview.open("PersonalCenter.html", "PersonalCenter");
									}, 3000);
									vm.$toasted.success("登录成功,三秒钟后跳转...",{position:"bottom-center",duration:3000});
								}
							}
						})
					}
				} 
			})
		</script>
	</body>
</html>